<template>
	<view class="content">
		<up-navbar title="访销单" placeholder @leftClick="leftClick"></up-navbar>
		<view class="card">
			<view class="main-header">
				<view class="title">
					基本信息
				</view>
			</view>
			<view class="goods-card">
				<view class="display: flex;margin-bottom: 10rpx;">
					<view class="tags-name">
						<span style="font-size: 32rpx;">{{detailInfo.store?.store_name}}</span>
						<view class="type1" v-if="detailInfo.order_type === 1">
							访销单
						</view>
						<view class="type2" v-else>
							退货单
						</view>
					</view>
				</view>
				<view class="goods-item">
					单据编号: {{detailInfo.no}}
				</view>
				<view class="goods-item">
					开单仓库: {{detailInfo.warehouse_id}}
				</view>
				<view class="goods-item">
					支付方式: {{payType[detailInfo.payment_type]}}
				</view>
				<view class="goods-item">
					备注: {{detailInfo.remark}}
				</view>
			</view>
		</view>
		<view class="card">
			<view class="main-header">
				<view class="title">
					商品信息
				</view>
			</view>
			<view class="goods-card">
			    <up-row justify="space-between">
			        <up-col span="2">
			            <up-icon label="类型" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
			            </up-icon>
			        </up-col>
			        <up-col span="4">
			            <up-icon label="商品名" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
			            </up-icon>
			        </up-col>
			        <up-col span="2">
			            <up-icon label="数量" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
			            </up-icon>
			        </up-col>
			        <up-col span="2">
			            <up-icon label="单位" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
			            </up-icon>
			        </up-col>
			        <up-col span="2">
			            <up-icon label="金额" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
			            </up-icon>
			        </up-col>
			    </up-row>
			    <view class="line"></view>
			    <block v-for="(item, index) in detailInfo.detail" :key="index">
			        <up-row justify="space-between">
			            <up-col span="2">
			                <up-text :text="(item.type === 1) ? '销' : '赠'" color="rgba(101, 103, 105, 1)" align="center" class="truncate-text"></up-text>
			            </up-col>
			            <up-col span="4">
			                <up-text :text="item.goods.goods_name" color="rgba(101, 103, 105, 1)" align="center" class="truncate-text"></up-text>
			            </up-col>
			            <up-col span="2">
			                <up-text :text="item.num" color="rgba(101, 103, 105, 1)" align="center" class="truncate-text"></up-text>
			            </up-col>
			            <up-col span="2">
			                <up-text :text="item.spec.unit_name" color="rgba(101, 103, 105, 1)" align="center" class="truncate-text"></up-text>
			            </up-col>
			            <up-col span="2">
			                <up-text :text="item.total_price" color="rgba(101, 103, 105, 1)" align="center" class="truncate-text"></up-text>
			            </up-col>
			        </up-row>
			    </block>
			    <view class="line"></view>
			    <view class="footer">
			        <span>商品总数：{{ detailInfo.detail?.reduce((cur, item) => cur + Number(item.num), 0) }}</span>
			        <span>总计金额：{{ detailInfo.detail?.reduce((cur, item) => cur + Number(item.total_price), 0) }}</span>
			    </view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { orderLists } from '@/package_saleman/api/List';
	import { ref, unref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	interface RouteParams {
		name : string,
		id : string
	}
	const routeParams = ref<RouteParams>({
		id: '',
		name: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		getDetail()
	})
	const fileList = ref([])

	const useGetDetail = () => {
		const detailInfo = ref({})

		const getDetail = async () => {
			const params = {
				id: unref(routeParams).id
			}
			const res = await orderLists(params)
			detailInfo.value = res.data
			// fileList.value = detailInfo.value?.image.split(",").map((val) => {
			// 	return {
			// 		url: val
			// 	}
			// })
		}

		return {
			detailInfo,
			getDetail
		}
	}
	const { getDetail, detailInfo } = useGetDetail()
	const leftClick = () => {
		uni.navigateBack()
	}
	const payType = {
		1: '现结',
		2: '公司账户',
		3: '预存款'
	}
	const goodsList = [{
		name: '康师傅方便面',
		num: 4,
		unit: '瓶',
		amount: 121
	}, {
		name: '康师傅方便面',
		num: 4,
		unit: '瓶',
		amount: 121
	}, {
		name: '康师傅方便面',
		num: 4,
		unit: '瓶',
		amount: 121
	}, {
		name: '康师傅方便面',
		num: 4,
		unit: '瓶',
		amount: 121
	}]
</script>
<style lang="scss" scoped>
	.content {
		padding: 12rpx;
		background-color: #f0f0f0;
	}

	.card {
		display: flex;
		flex-direction: column;
		padding: 36rpx;
		border-radius: 16rpx 16rpx 0 0;
		margin: 20rpx 0;
		background-color: #fff;

		.main-header {
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(1, 11, 31, 1);
			}

			.addGoods {
				color: rgba(15, 127, 255, 1);
			}
		}

		.goods-card {
		    display: flex;
		    flex-direction: column;
		    gap: 10rpx;
		    padding: 10rpx;
		    box-sizing: border-box;
		}
		
		:deep(.u-icon) {
		    justify-content: center;
		    text-align: center; /* 让图标内的标题居中 */
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis; /* 标题超出部分用省略号代替 */
		}
		
		.line {
		    width: 654rpx;
		    height: 0rpx;
		    margin: 20rpx auto;
		    border: 2rpx solid rgba(0, 0, 0, 0.1);
		}
		
		.footer {
		    font-size: 24rpx;
		    font-weight: 500;
		    color: rgba(100, 101, 102, 1);
		    margin-left: 30rpx;
		    margin-bottom: 20rpx;
		}
		
		.truncate-text {
		    max-width: 100%;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis; /* 内容超出部分用省略号代替 */
		}

		.tags-name {
			display: flex;
			font-size: 24rpx;
			align-items: center;

			// font-weight: 500;
			.type1 {
				border-radius: 2px;
				padding: 6rpx;
				height: 30rpx;
				border: 1px solid rgba(15, 127, 255, 1);
				color: rgba(15, 127, 255, 1);
				margin: 0 12rpx;
			}

			.type2 {

				border-radius: 2px;
				padding: 6rpx;
				height: 30rpx;
				border: 1px solid rgba(255, 84, 84, 1);
				color: rgba(255, 84, 84, 1);
			}
		}

		.goods-item span {
			flex: 1;
			text-align: center;
		}

		.goods-progress {
			display: flex;
			flex-direction: column;
			padding: 24rpx;
			background: rgba(15, 127, 255, 0.05);

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 45rpx;
				color: rgba(2, 14, 36, 1);
			}

			.progress-line {}

			.goods-footer {
				display: flex;
				justify-content: space-between;
			}
		}

		.footer {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 10rpx;
		}
	}
</style>